<!-- DateTimePicker -->
<template>
    <v-dialog
        ref="dialog"
        v-model="modal"
        persistent
        max-width="600px"
      >
        <template v-slot:activator="{ on }">
          <v-text-field
            :value="value"
            :label="label"
            prepend-icon="event"
            readonly
            v-on="on"
          ></v-text-field>
        </template>
        <v-card>
          <v-card-title class="title primary--text">选择日期和时间</v-card-title>
          <v-row class="pa-2">
            <v-col cols="12" sm="6">
              <v-date-picker
              v-model="publishDate"
              locale="zh-cn"
              scrollable></v-date-picker>
              </v-col>
            <v-col cols="12" sm="6">
              <v-time-picker
              scrollable
              v-model="publishTime"
              format="24hr"
              locale="zh-cn"></v-time-picker>
            </v-col>
          </v-row>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn @click="modal = false">取消</v-btn>
            <v-btn color="primary" @click="onBtnOKClick">确定</v-btn>
            <v-spacer></v-spacer>
          </v-card-actions>
        </v-card>
      </v-dialog>
</template>

<script>
const now = new Date()
const nowStr = now.toLocaleDateString('zh', { hour12: false, year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }).replace(/\//g, '-')
export default {
  name: 'DateTimePicker',
  props: {
    label: {
      type: String,
      default: '日期时间'
    },
    value: {
      type: String,
      default: ''
    }
  },
  data: function () {
    return {
      modal: false,
      publishDate: nowStr.substring(0, 10),
      publishTime: nowStr.substring(10)
    }
  },
  watch: {
    value: function(newVal, oldVal) {
      if (newVal !== null || newVal !== '' || newVal !== undefined) {
        this.publishDate = newVal.substring(0, 10)
        this.publishTime = newVal.substring(10)
      }
    }
  },
  computed: {
    publishNewValue: function() {
      return this.publishDate + ' ' + this.publishTime
    }
  },
  methods: {
    onBtnOKClick: function() {
      this.modal = false
      this.$emit('input', this.publishNewValue)
    }
  }
}
</script>
<style>
.v-picker--time .v-picker__title {
  padding: 9px;
}
.v-picker--date .v-picker__body {
  height: 290px;
}
</style>
